<template>
  <div>
    <a-spin tip="数据导入中..." :spinning="spinning">
	<a-card :bordered="false" style="height:100%">
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="$refs.modal.add()">添加部门</a-button>
		<a-divider type="vertical" />
		<a-button type="primary" icon="download" @click="downloadFile">下载模板</a-button>
		<a-divider type="vertical" />
		<a-upload :customRequest="importData" :fileList="[]">
		  <a-button type="primary" icon="import">导入数据</a-button>
		</a-upload>
		
      </div>
      <div v-if="data && data.length">
        <a-table
          class="components-table-demo-nested"
          ref="table" 
          :defaultExpandAllRows="false"
          :columns="columns" 
          :row-key="record => record.id" 
          :data-source="data" 
          :pagination="false" 
          :loading="loading" 
			bordered
          @change="handleTableChange">
          <span slot="icon" slot-scope="text">
            <template v-if="text != null">
              <a-icon :type="text" /> {{ text }}
            </template>
          </span>
          <span slot="action" slot-scope="text, record">
            <template>
              <a @click="handleSubMenu(record)">添加子部门</a>
              <a-divider type="vertical" />
              <a @click="handleEdit(record)">编辑</a>
			  <a-divider type="vertical" />
			  <a-popconfirm
			    title="是否删除该条记录?"
			    @confirm="handleDel(record)"
			    @cancel="cancel"
			    okText="是"
			    cancelText="否"
			  >
			    <a href="#">删除</a>
			  </a-popconfirm>
            </template>
          </span>
        </a-table>
      </div>
    </a-card>
	</a-spin>
    <departments-modal ref="modal" @ok="handleOk"></departments-modal>
  </div>

</template>

<script>
  import departmentsModal from './modules/departmentsModal'
  import {getUrl,postAxiosUrl,uploadUrl} from '@/api/manage'
  import my from '../../api/my/my' 
  
  export default {
    components: {
      departmentsModal
    },
    data() {
      return {
        data: [],
        pagination: {size:'small'},
        loading: false,
		spinning : false,
        columns: [{
            title: '部门名称',
            dataIndex: 'name'
          },{
		  title: '部门编号',
		  dataIndex: 'code'
		},
          {
            title: '机构属性',
            dataIndex: 'type'
          },
          {
            title: '机构规格',
            dataIndex: 'grade',
          },
          {
            title: '领导职数',
            dataIndex: 'leaderNums'
          },
		  {
		    title: '职位明细',
		    dataIndex: 'positionNums'
		  },
		  {
		    title: '内部机构',
		    dataIndex: 'insideNums'
		  },
          {
            title: '操作',
            scopedSlots: { customRender: 'action' }
          }
        ]
      }
    },
    created() {
      this.fetch()
    },
    methods: {
      handleOk(){
          this.fetch()
      },
      handleSubMenu(record) {
          this.$refs.modal.addSubMenu(record)
      },
      handleEdit (record) {
          this.$refs.modal.edit(record)
      },
      handleTableChange(pagination, filters, sorter) {
        console.log(pagination)
        const pager = { ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters,
        })
      },
	  cancel(e) {
	  },
	  handleDel(record) {
		  postAxiosUrl('department/delete',{id:record.id}).then(res=>{
			 this.fetch()
		  })
	  },
      fetch(params = {}) {
        console.log('params:', params)
        this.loading = true
        var _this = this
        return getUrl('department/getTrees', Object.assign(params, this.queryParam))
          .then(data => {
            
            const pagination = { ...this.pagination}
            // Read total count from server
            pagination.total = data.result.totalCount
            pagination.showTotal = total => `共 ${total} 条`
            pagination.showQuickJumper = true
            this.loading = false
            this.data = data.result
            this.pagination = pagination

          })
      },
	  downloadFile(){
		  const a = document.createElement('a')
		  a.href = my.baseURL + `department/downloadfile`
		  a.click()
	  },
	  // 重写a-upload的文件上传处理方式
	  importData (data) {  
	      this.spinning = true
	      this.saveFile(data)  
	  },  
	  // 上传并保存文件
	  saveFile (data){  
	    var _this = this
	    const formData = new FormData()  
	    formData.append('file', data.file)  
	    uploadUrl('department/upload',formData).then((res) => {
	      console.log(res)
	      if (res.data.success){
	        _this.spinning = false
	         _this.$message.info(res.data.result)
	         _this.queryParam = {}
	       this.fetch()
	      }else{
	        _this.spinning = false
	        _this.$message.error(res.data.error)
	      }
	    })
	  },
    }
  }
</script>
<style>
  .ant-select-dropdown-menu-item-selected,
  .ant-select-dropdown-menu-item-selected:hover {
    color: #52c41a;
    font-weight: 700;
    background-color: #fafafa;
  }
</style>
